<template>
	<!-- <view class="content">
		<image v-bind:class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view> -->
	<view>
		<!-- <scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 0px)" :scroll-into-view="'main-'+mainCur"
		 @scroll="handleScroll"> -->
		<!-- <view class="header" :style="{position:headerPosition,top:headerTop}">
			<view class="addr"></view>
			<view class="input-box">

			</view>
			<view class="icon-btn">
				<view class="icon tongzhi" @tap="toMsg"></view>
				<view class="icon setting" @tap="toSetting"></view>
			</view>
		</view> -->
		<!-- 占位 -->
		<view class="head-container">
			<view class="head-img-view" @click="goPersonageCenter">
				<image class="head-img" :src="header" mode="aspectFill"></image>
				<view class="head-text-view">
					<text>{{user.name}}</text>
					<text>{{user.telephone}}</text>
				</view>
			</view>
			<!-- <view class="message-view">
					<uni-icons type="email" color="#ffffff" size="25" @click="goMessage" />
					<view v-if="2>0" class="message-badge-view" :class="2?'':'badge-nonumber-view'">
						22
					</view>
				</view> -->
		</view>

		<view class="uni-noticebar"  @click="goMessage">
						<view class="uni-noticebar-icon">
							<uni-icons type="sound" :color="color" size="14" />
						</view>
						<!-- <text style="white-space: nowrap;
		　　text-overflow: ellipsis;
		　　overflow: hidden;">正安县第三中学2020-1011学年度第一学期九年级开学通知</text> -->
		<view class="textBox">
		      <transition name="slide">
		      					<view class="text-container" :key="text.id">
		      						<text class="text">{{text.val}}</text>
		      						<text class="text-sub">{{'2020-09-14 15:05:33'}}</text>
		      					</view>
		      				</transition>
		    </view>
					</view>

		<!-- <datetime-picker placeholder="请选择活动时间" start="2000-02-03 02:08" end="2100-10-28 22:58" fields="minute" @change="changeDatetimePicker"></datetime-picker> -->

		<!-- <scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto"
			 :class="{isFixed:isFixeds==true}">
				<view class="uni-tab-item" @click="ontabtap">
					<text v-for="(tab,index) in tabBars" :key="tab.menuId" :data-id="tab.menuId" :data-current="index" class="uni-tab-item-title"
					 :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.menuName}}</text>

				</view>
			</scroll-view> -->

		<view v-for="(tab,i) in tabBars" :key="i" :id="'main-'+i" style="margin-bottom: 10px;">
			<uni-section :title="tab.menuName" type="line"></uni-section>
			<view class="menu-container">
				<view class="cu-item" v-for="(item,j) in tab.subMenus" :key="j" v-if="j<tab.subMenus.length" @click="change(i, j)">
					<view :class="'iconfont menu-icon '+ item.menuLogo" :style="{'color':item.color}">
						<view v-if="item.badge>0" class="badge-view" :class="item.isShowNum?'':'badge-nonumber-view'">
							{{item.isShowNum?(item.badge>99?'99+':item.badge):""}}
						</view>
					</view>
					<text>{{item.menuName}}</text>

				</view>
			</view>
		</view>

		<!-- <view class="cu-list grid col-3" :class="['col-' + 3,'no-border']">
				<view class="cu-item" v-for="(item,index) in tab.subMenus" :key="index" v-if="index<tab.subMenus.length">
					<span :class="'iconfont menu-icon '+ item.icon"></span>
					<text>{{item.name}}</text>
				</view>
			</view> -->

		<!-- <uni-section title="办公管理" type="line"></uni-section>
		<view class="example-body">
			<uni-grid :column="3" :show-border="false" :square="false" :highlight="false" @change="change">
				<uni-grid-item v-if="index < 8" v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box" :style="{'backgroundColor':index % 2 === 0 ? '#f5f5f5' : '#f5f5f5'}">
						<image src="/static/logo.png" class="image" mode="aspectFill" />
						<text class="menu-text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view> -->
		<view style="height: 5px;"></view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import datetimePicker from '@/components/datetime-picker/datetime-picker.vue';
	// import utils from '../../../common/js/utils.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	import api from '@/common/js/api.js'; 
	
	export default {
		menuName: 'scroll',
		props: {
			color: {
				type: String,
				default: '#de8c17'
			},
		},
		comments: {
			datetimePicker
		},
		onLoad: function(options) {
			console.log('onLoadonLoadonLoadonLoad')
			uni.request({
			    url: '/api/getUser', //仅为示例，并非真实接口地址。
			    data: {
			        text: 'uni.request'
			    },
			    header: {
			        'custom-header': 'hello' //自定义请求头信息
			    },
			    success: (res) => {
			        console.log(res);
			    }
			});
			this.getUserInfo()
			this.getMenu()
		},
		onShow: function(options)  {
			console.log("state.userInfo")
			console.log(this.state)
			
			this.user = this.state.userInfo ?? {}
			this.header = this.user?.photo ?? "../../../../../static/logo.png"
			if(this.user?.photo != null){
				this.header = api.baseUrl + this.user.photo
			}
		},
		data() {
			return {
				header: "",
				user: {},
				title: 'Hello',
				logo: 'logo',
				tabIndex: 0,
				mainCur: "",
				activeColor: '#007aff',
				fullWidth: document.documentElement.clientWidth,
				isFixeds: false,
				textArr: [
					'正安县第三中学2020-1011学年度第一学期九年级开学通知',
					'关于八、九年级家长本学期未收到学生进出校的通知"',
					'致全省学生及家长的一封信！'
				],
				number: 0,
				tabBars: [{
					menuName: '申请审批',
					menuId: '01',
					subMenus: [{
							menuName: '代请假',
							menuId: '0101',
							color: '#38B0DE',
							menuLogo: "icon-gonggao",
							menuRoute: 'apply_approval/replace_leave',
							badge: 100,
							isShowNum: true,
						},
						{
							menuName: '请假审批',
							menuId: '0102',
							color: '#6495ED',
							menuLogo: "icon-tongxunlu",
							menuRoute: 'apply_approval/approval',
							badge: 5,
							isShowNum: false,
						}
					],

				}, {
					menuName: '办公管理',
					menuId: '02',
					subMenus: [{
							menuName: '通知公告',
							menuId: '0101',
							color: '#38B0DE',
							menuLogo: "icon-gonggao",
							menuRoute: 'oa_manage/notice/notice',
							badge: 100,
							isShowNum: true,
						},
						{
							menuName: '智能通讯',
							menuId: '0102',
							color: '#6495ED',
							menuLogo: "icon-tongxunlu",
							menuRoute: 'oa_manage/contacts/contacts',
							badge: 5,
							isShowNum: false,
						},
					],

				}, {
					menuName: '教务管理',
					menuId: '03',
					subMenus: [{
							menuName: '班级管理',
							menuId: '0201',
							color: '#38B0DE',
							menuLogo: "icon-banjiguanli",
							menuRoute: 'edu_manage/grade_manage/grade_manage',
						},
						{
							menuName: '成绩管理',
							menuId: '0202',
							color: '#6495ED',
							menuLogo: "icon-chengji",
							menuRoute: 'edu_manage/mark_manage/mark_manage',
						},
						{
							menuName: '课表管理',
							menuId: '0203',
							color: '#FF7F50',
							menuLogo: "icon-kebiaoxinxi",
							menuRoute: 'edu_manage/course_manage/course_manage',
							badge: 5,
							isShowNum: false,
						},
					],
				}, {
					menuName: '绩效管理',
					menuId: '04',
					subMenus: [{
						menuName: '日常考勤',
						menuId: '0301',
						color: '#38B0DE',
						menuLogo: "icon-kaoqin",
						menuRoute: 'performance_mange/day_attendance/day_attendance',
					}, ],
				}, {
					menuName: '后勤管理',
					menuId: '05',
					subMenus: [{
							menuName: '缴费管理',
							menuId: '0401',
							color: '#38B0DE',
							menuLogo: "icon-1",
							menuRoute: 'logistics_manage/pay_manage/pay_manage',
							badge: 5,
							isShowNum: false,
						},
						{
							menuName: '进出记录',
							menuId: '0402',
							color: '#6495ED',
							menuLogo: "icon-churukujilu",
							menuRoute: 'logistics_manage/record_access/record_access',
						},
					],
				}, {
					menuName: '智慧环境',
					menuId: '06',
					subMenus: [{
						menuName: '设备管理',
						menuId: '0501',
						color: '#38B0DE',
						menuLogo: "icon-shebeiguanli",
						menuRoute: 'wisdom_environment/device_manage/device_manage',
					}, ],
				}, {
					menuName: '其它',
					menuId: '07',
					subMenus: [{
							menuName: '用户信息管理',
							menuId: '0601',
							color: '#38B0DE',
							menuLogo: "icon--yonghuxinxiguanli",
							menuRoute: 'other/userinfo_manage/userinfo_manage',
						},
						{
							menuName: '个人中心',
							menuId: '0602',
							color: '#6495ED',
							menuLogo: "icon-profile",
							menuRoute: 'other/personage_center/personage_center',
						},
					],
				}],
				grmenuId: "",
				scrollInto: "",
				cacheTab: [],
				list: [{
						url: '/static/c1.png',
						text: 'Grid 1',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: 'Grid 2',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/c3.png',
						text: 'Grid 3',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/c4.png',
						text: 'Grid 4',
						badge: '2',
						type: "error"
					},
					{
						url: '/static/c5.png',
						text: 'Grid 5'
					},
					{
						url: '/static/c6.png',
						text: 'Grid 6'
					},
					{
						url: '/static/c7.png',
						text: 'Grid 7'
					},
					{
						url: '/static/c8.png',
						text: 'Grid 8'
					},
					{
						url: '/static/c9.png',
						text: 'Grid 9'
					}
				]
			}
		},
		created() {
			window.addEventListener('resize', this.handleResize)
		},
		beforeDestroy: function() {
			window.removeEventListener('resize', this.handleResize)
		},
		// <!--在watch中监听实时宽高-->
		watch: {
			windowHeight(val) {
				let that = this;
				console.log("实时屏幕高度：", val, that.fullWidth);
			},
			windowWidth(val) {
				let that = this;
				console.log("实时屏幕宽度：", val, that.fullWidth);
			}
		},
		computed: {
			...mapState('teacher', {
				state: state => state
			}),
			rightWidth() {
				let leftWidth = this.isCollapse ? '64' : '200';
				console.log(this.fullWidth)
				return (this.fullWidth - leftWidth) + 'px'
			},
			text() {
				return {
					menuId: this.number,
					val: this.textArr[this.number]
				}
			}
		},
		mounted() {
			this.startMove()
		},
		methods: {
			// ...mapMutations(['setUserInfo']),
			...mapActions('teacher', [
				'setUserInfo'
			]),
			handleResize(event) {
				this.fullWidth = document.documentElement.clientWidth
				console.log(document.documentElement.clientWidth)
			},

			startMove() {
				// eslint-disable-next-line
				let timer = setTimeout(() => {
					if (this.number === 2) {
						this.number = 0;
					} else {
						this.number += 1;
					}
					this.startMove();
				}, 3000); // 滚动不需要停顿则将2000改成动画持续时间
			},
			handleScroll(e) {
				if (e.type != "scroll") {
					return
				}
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				// console.log(window.pageYOffset)
				// console.log(document.documentElement.scrollTop)
				// console.log(document.body.scrollTop)
				if (e.detail.scrollTop > 194) { //提前判断要上升多少像素就固定
					this.isFixeds = true;
				} else {
					this.isFixeds = false;
				}
				console.log(this.isFixeds)
			},
			goPersonageCenter() {
				uni.navigateTo({
					url: 'other/personage_center/personage_center'
				})
			},
			ontabtap(e) {
				// console.log(e)
				this.isFixeds = true;
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index;
				this.mainCur = e.target.dataset.id;
				this.switchTab(index);
				console.log(e.target.dataset.id)
			},
			goMessage() {
				uni.navigateTo({
					url: "message/message",
				})
			},
			change(section, index) {

				// this.list[index].badge && this.list[index].badge++

				// uni.showToast({
				// 	title: `点击${section}-${index}`,
				// 	menuLogo: 'none'
				// })
				console.log(this.tabBars[section])
				let item = this.tabBars[section].subMenus[index]
				uni.navigateTo({
					url: item.menuRoute
				})
			},
			getUserInfo() {
				console.log("getUserInfo")
				this.$api.selectLoginUserInfo().then((res) => {
					this.loading = false;
					if (res.code == null) { //成功
						this.user = res
						if(this.user?.photo != null){
							this.header = api.baseUrl + this.user.photo
						}
						// this.setUserInfo(res)
						this["setUserInfo"](res)
						console.log('selectLoginUserInfo' + res)
					} else {
						// alert("getUserInfo code：" + res.code)
					}
					// console.log('request success', res)
					// this.res = '请求结果 : ' + JSON.stringify(res);

				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			getMenu() {
				this.$api.selectLoginUserMenu().then((res) => {
					this.loading = false;
					if (res.code == null) { //成功
						// console.log('request success', res)
						this.res = '请求结果 : ' + JSON.stringify(res);

					} else {
						// alert("getMenu code：" + res.msg)
						console.log("getMenu code：" + res.msg)
					}


				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			switchTab(index) {

				this.scrollInto = this.tabBars[index].id;

				// 释放 tabId
				if (this.cacheTab.length > MAX_CACHE_PAGE) {
					let cacheIndex = this.cacheTab[0];
					this.clearTabData(cacheIndex);
					this.cacheTab.splice(0, 1);
					//console.log("remove cache index:: " + cacheIndex);
				}
			},
		}
	}
</script>

<style scoped lang="less">
	/*选择iconfont.css所在的路径*/
	@import '../../../static/iconfont/iconfont.css';

	page {
		background-color: #F1F1F1;
	}

	.head-container {
		display: flex;
		height: 150px;
		align-items: center;
		background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
	}

	.head-img-view {
		margin: 10px;
		height: 60px;
		display: flex;
		flex-direction: row;
	}

	.head-img {
		width: 60px;
		height: 60px;
		border-radius: 5px;
		border: 2px solid #fff;
	}

	.head-text-view {
		margin-top: 5px;
		margin-left: 5px;
		font-size: 15px;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.message-view {
		position: absolute;
		top: 0;
		right: 20px;
	}

	.uni-noticebar {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		align-items: center;
		padding: 6px 12px;
		margin-top: 10px;
		margin-bottom: 10px;
		background-color: #fffbe8;
		/* color: #de8c17; */
	}
	.uni-noticebar-icon {
		display: flex;
		margin-right: 5px;
		flex-direction: row;
		align-items: center;
	}
	
	  .textBox {
	    width: 100%;
	    height: 30px;
	    margin: 0 auto;
	    overflow: hidden;
	    position: relative;
		align-items: center;
	    /* text-align: center; */
	  }
	 .text-container {
			flex-direction: row;
			display: flex;
			// width: 100%;
			position: absolute;
			top: 2px;
			bottom: 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			align-items: center;
	
			.text {
				font-size: 15px;
				/* background-color: #007AFF; */
				color: #de8c17;
			}
	
			.text-sub {
				font-size: 14px;
				color: #fe9d37;
				margin-left: 5px;
			}
		}
	  .slide-enter-active, .slide-leave-active {
	    transition: all 0.5s linear;
	  }
	  .slide-enter{
	    transform: translateY(20px) scale(1);
	    opacity: 1;
	  }
	  .slide-leave-to {
	    transform: translateY(-20px) scale(1);
	    opacity: 0;
	  }

	/* .warp {
		position: relative;
		width: 400px;
		height: 200px;

		.image {
			width: 400px;
			height: 200px;
		}
	} */


	/* .header {
		width: 92%;
		padding: 0 4%;
		height: 50px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #f06c7a;
		.icon-btn {
			width: 60px;
			height: 60px;
			flex-shrink: 0;
			display: flex;

			.icon {
				color: #fff;
				width: 30px;
				height: 30px;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 21px;
			}
		}
	} */
	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}

	.VerticalBox {
		display: flex;
	}

	.isFixed {
		position: fixed;
		width: 100%;
		background-color: #Fff;
		top: 0;
		z-index: 999;
	}

	.place {
		display: flex;
		justify-content: flex-end;
		background-color: #8A6DE9;
		height: 50px;
		padding-right: 20px;
	}

	.place-bottom {
		height: 150px;
	}

	.user {
		width: 92%;
		padding: 0 4%;
		display: flex;
		align-items: center;
		// position: relative;
		background-color: #8A6DE9;
		padding-bottom: 60px;

		.left {
			width: 20vw;
			height: 20vw;
			flex-shrink: 0;
			margin-right: 20upx;
			border: solid 1upx #fff;
			border-radius: 100%;
			color: #FFFFFF;
			padding: 10px;

			image {
				width: 10vw;
				height: 10vw;
				border-radius: 100%;
			}

		}

		.right {
			width: 100%;

			.username {
				font-size: 36px;
				color: #fff;
			}

			.signature {
				color: #eee;
				font-size: 14px;
			}
		}

		.erweima {
			flex-shrink: 0;
			width: 10vw;
			height: 10vw;
			margin-left: 5vw;
			border-radius: 100%;

			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to left, #fbbb37 0%, #fcf0d0 105%);

			.icon {
				color: #7b6335;
				font-size: 42upx;
			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.menu-icon {
		position: relative;
		justify-content: center;
		color: #FFFFFF;
		font-size: 24px;
		/* height: 90px;
		width: 90px; */
		/* margin-top: -2px; */
		margin-bottom: -5px;
	}

	.menu-text {
		font-size: 14px;
		/* margin-top: 15px; */
		color: #FFFFFF;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 13px;
		color: #8f8f94;
	}

	.scroll-h {
		width: 100%;
		height: 40px;
		background-color: #F1F1F1;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		/* display: inline-block; */
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 40px;
		/* #endif */
		flex-wrap: nowrap;

		/* padding: 7px 17px; */
	}

	.uni-tab-item-title {
		padding-left: 17px;
		padding-right: 17px;
		color: #555;
		font-size: 15px;
		height: 40px;
		line-height: 40px;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	/* .uni-icons {
		width: 50px;
		height: 50px;
		color: #FFFFFF;
	} */
	.text-left {
		text-align: left;
	}

	.example-body {
		/* width: 100%; */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 8px 0px 0px 8px;
		font-size: 14px;
		background-color: #ffffff;
		margin-bottom: 10px;
	}

	.uni-section {
		background-color: #fff;
		/* background-color:transparent; */
		margin-top: 0px;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0px 0px 8px 0px;
		margin-right: 8px;
		margin-bottom: 8x;
		/* margin: 0px 0px 15px 15px; */
	}

	/* .cu-list.grid.no-border>.cu-item {
		padding-top: 10upx;
		padding-bottom: 20upx
	}
	
	.cu-list.grid.no-border>.cu-item:after {
		border: none
	}
	
	.cu-list.grid.no-border {
		padding: 20upx 10upx
	} */

	/* .grid.col-3.grid-square>view {
		padding-bottom: calc((100% - 40upx)/3);
		height: 0;
		width: calc((100% - 40upx)/3);
	} */
	.col-3 {
		width: 33.33%;
	}

	/* .cu-list.grid>.cu-item {
		position: relative;
		display: flex;
		padding: 20upx 0 30upx;
		transition-duration: 0s;
		flex-direction: column
	} */

	/* .cu-list>.cu-item {
		transition: all .6s ease-in-out 0s;
		transform: translateX(0upx)
	} */

	/* .cu-list.menu>.cu-item {
		position: relative;
		display: flex;
		padding: 0 30upx;
		min-height: 100upx;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center
	} */
	.cu-tag {
		font-size: 24upx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0upx 16upx;
		height: 48upx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}

	.menu-container {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		flex-direction: row;
		background-color: #FFFFFF;
	}

	.cu-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 33.33%;
		height: 80px;
		font-size: 15px;
		color: #888888
	}

	.badge-view {
		border-radius: 10px;
		position: absolute;
		top: 0px;
		right: -25px;
		font-size: 12px;
		line-height: 14px;
		padding: 0upx 5px;
		height: 14px;
		color: #fff;
		background-color: #dd514c;
	}

	.badge-nonumber-view {
		top: 5px;
		right: -10px;
		border-radius: 5px;
		height: 10px;
	}

	.message-badge-view {
		border-radius: 10px;
		position: absolute;
		top: 3px;
		right: -15px;
		font-size: 12px;
		line-height: 14px;
		padding: 0upx 5px;
		height: 14px;
		color: #fff;
		background-color: #dd514c;
	}
</style>
